<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { SimpleScrollbar } from '@sa/materials';
import { DeviceInfoList, OperList, freeFeed, getVideoMonitorDataApi } from '@/service/api/bigScreen';
import { useProjectStore } from '@/store/modules/project';
import ChartsComponents from './chartsComponents.vue';
const projectStore = useProjectStore();

const list = ref([]);
const route = useRoute();
const getOperList = () => {
  OperList({ farmId: _farmId }).then(res => {
    list.value = res.data?.data;
  });
};
let _farmId = route.query.farmId;

onMounted(() => {
  if (_farmId) getOperList();
  getDeviceInfoList();
  getVideoMonitorData(projectStore.currentMonitorId);
});

const minute = ref(1);
const seconds = ref(0);

// 获取投料机数据
const baitCastingMachineData = ref();
const getDeviceInfoList = () => {
  const obj = {
    categoryCode: 2002,
    farmId: _farmId
  };
  DeviceInfoList(obj).then(res => {
    if (res.error === null) {
      if (res.data.data.length > 0) {
        baitCastingMachineData.value = res.data.data[0];
      }
    }
  });
};

const startFeeding = () => {
  if (minute.value === 0 && seconds.value === 0) {
    window.$message?.error('请输入投料时长');
    return;
  }
  if (!baitCastingMachineData.value) {
    window.$message?.error('该养殖池未配置投饵机');
    return;
  }
  freeFeed({
    id: baitCastingMachineData.value.id,
    controlMode: 0,
    secs: minute.value * 60 + seconds.value,
    status: true
  }).then((res: any) => {
    if (res.error === null) {
      window.$message?.success('开始投料成功');
    }
  });
};

watch(
  () => projectStore.currentMonitorId,
  newVal => {
    getVideoMonitorData(newVal);
  }
);

// 获取行为分析数据
const MonitorData = ref([]);

const getVideoMonitorData = (id: any) => {
  getVideoMonitorDataApi({
    monitorId: id
  }).then(res => {
    if (res.error === null) {
      MonitorData.value = res.data;
    }
  });
};

// 模态框逻辑
const modalVisible = ref(false);
const amodal = ref();
const modalOpenType = ref(1);
const openModal = (type: number) => {
  if (type === 1) {
    if (!baitCastingMachineData.value) {
      window.$message?.error('该养殖池未配置投料机');
      return;
    }
  }
  modalOpenType.value = type;
  modalVisible.value = true;
};
</script>

<template>
  <div>
    <div v-if="baitCastingMachineData && baitCastingMachineData.isShow === true">
      <div class="index-top">
        <div>
          <div class="header">
            <img src="../../../assets/imgs/breedDetails/title_tlj@2x.png" alt="" />
          </div>
          <div class="warp">
            <div class="warp-left">
              <div>
                <span>·&nbsp;&nbsp;&nbsp;&nbsp;在线</span>
              </div>
              <div>
                <span>·饲料状态</span>
                <span class="rs">未知</span>
              </div>
              <div>
                <span>·投料时长</span>
              </div>
              <div style="display: block">
                <ASpace>
                  <AInputNumber v-model:value="minute" class="my-input-number" :min="0" />
                  分
                  <AInputNumber v-model:value="seconds" class="my-input-number" :min="0" />
                  秒
                </ASpace>
                <div class="default-btn" @click="startFeeding">开始投料</div>
              </div>
            </div>
            <div class="warp-right">
              <div>
                <span>0kg</span>
                <span>剩余饲料</span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="header" style="width: 153px; height: 34px; padding-top: 0px; margin-top: 20px">
            <img src="../../../assets/imgs/breedDetails/title_ylxwfx@2x.png" alt="" />
          </div>
          <div class="list1" style="margin-top: 20px">
            <div v-for="(item, index) in MonitorData" :key="index" class="item">
              <span>{{ item.name }}</span>
              <span>{{ item.desc }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="index-top">
        <div>
          <ChartsComponents :index="2"/>
          <ChartsComponents :index="3" :margin-top="10" />
        </div>
        <div class="modal-show-btn-wrapper">
          <div class="modal-show-btn" @click="openModal(1)">投料机</div>
          <div class="modal-show-btn" @click="openModal(2)">鱼类行为分析</div>
        </div>
      </div>
    </div>

    <div class="index-bto">
      <div class="header">
        <img src="../../../assets/imgs/breedDetails/title_czjl@2x.png" alt="" />
      </div>
      <div class="card-warp">
        <div class="warp-content">
          <div class="list-title list">
            <div>日期</div>
            <div>设备</div>
            <div>说明</div>
          </div>
          <div>
            <SimpleScrollbar class="scroll" :step="0.3" :list="list" hover="true">
              <div v-for="(i, index) in list" :key="index" class="list-content list item">
                <div>
                  {{ i.gmtCreated }}
                </div>
                <div>
                  {{ i.deviceName }}
                </div>
                <div :class="i.status ? 'greenF' : 'redF'">
                  {{ i.status ? '打开' : '关闭' }}
                </div>
              </div>
            </SimpleScrollbar>
          </div>
        </div>
      </div>
    </div>
    <div ref="amodal">
      <AModal v-model:open="modalVisible" :footer="null" :width="550" :get-container="() => amodal">
        <div class="index-top mt-20px" style="height: 350px">
          <div v-if="modalOpenType === 1">
            <div class="header">
              <img src="../../../assets/imgs/breedDetails/title_tlj@2x.png" alt="" />
            </div>
            <div class="warp">
              <div class="warp-left">
                <div>
                  <span>·&nbsp;&nbsp;&nbsp;&nbsp;在线</span>
                </div>
                <div>
                  <span>·饲料状态</span>
                  <span class="rs">未知</span>
                </div>
                <div>
                  <span>·投料时长</span>
                </div>
                <div style="display: block">
                  <ASpace>
                    <AInputNumber v-model:value="minute" class="my-input-number" :min="0" />
                    分
                    <AInputNumber v-model:value="seconds" class="my-input-number" :min="0" />
                    秒
                  </ASpace>
                  <div class="default-btn" @click="startFeeding">开始投料</div>
                </div>
              </div>
              <div class="warp-right">
                <div>
                  <span>0kg</span>
                  <span>剩余饲料</span>
                </div>
              </div>
            </div>
          </div>
          <div v-if="modalOpenType === 2">
            <div class="header" style="width: 153px; height: 34px; padding-top: 40px; margin-top: 20px">
              <img src="../../../assets/imgs/breedDetails/title_ylxwfx@2x.png" alt="" />
            </div>
            <div class="list1" style="margin-top: 60px">
              <div v-for="(item, index) in MonitorData" :key="index" class="item">
                <span>{{ item.name }}</span>
                <span>{{ item.desc }}</span>
              </div>
            </div>
          </div>
        </div>
      </AModal>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index {
  &-top {
    width: 510px;
    height: 590px;
    background-image: url('@/assets/imgs/breedDetails/bg_ylxw@2x.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .header {
      width: 90px;
      height: 34px;
      padding-top: 25px;
      margin-left: 20px;
    }
    .warp {
      display: flex;
      padding: 10px 24px;
      .warp-left {
        padding-left: 10px;
        & > div {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 14px;
          color: #8dd8f2;
          margin-top: 20px;
          &:nth-child(1) {
            img {
              width: 44px;
              height: 44px;
              margin-left: 25px;
            }
            span {
              font-weight: 400;
              font-size: 18px;
              color: #59ff42;
            }
          }
          .rs {
            display: inline-block;
            margin-left: 30px;
          }
        }
        .stepC {
          img {
            width: 28px;
            height: 28px;
            cursor: pointer;
          }
          span {
            display: inline-block;
            font-weight: 400;
            font-size: 18px;
            color: #ffffff;
            margin: 0 20px;
          }
        }
      }
      .warp-right {
        width: 240px;
        height: 245px;
        background-image: url('../../../assets/imgs/breedDetails/pic_tlj@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-left: 30px;
        div {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 60px auto;
          span {
            &:nth-child(1) {
              font-weight: bold;
              font-size: 32px;
              color: #ffffff;
              line-height: 48px;
              letter-spacing: 1px;
              text-shadow: 0px 1px 6px rgba(119, 169, 255, 0.5);
            }
            &:nth-child(2) {
              font-weight: 400;
              font-size: 18px;
              color: #8dd8f2;
            }
          }
        }
      }
    }
    .list1 {
      padding: 0 43px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 12px 0;
      .item {
        width: 191px;
        height: 62px;
        background-image: url('../../../assets/imgs/breedDetails/bg_fish_list@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: space-around;
        span {
          font-weight: 400;
          font-size: 16px;
          color: #8dd8f2;
        }
      }
    }
  }
  &-bto {
    width: 510px;
    height: 343px;
    background-image: url('@/assets/imgs/breedDetails/bg_czjl@2x.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .header {
      width: 111px;
      height: 35px;
      padding-top: 25px;
      margin-left: 20px;
    }
    .scroll {
      height: 220px;
      overflow: hidden;
    }
    .card-warp {
      flex: 1;
      padding: 10px 20px 0 20px;

      .warp-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0 15px;

        .list-title {
          font-weight: 500;
          font-size: 16px;
          color: #8dd8f2;
          margin-top: 20px;
          padding: 0 10px;
          div {
            font-weight: 500;
            font-size: 16px;
            color: #8dd8f2;
          }
        }

        .list-content {
          padding: 11px 10px;
          font-weight: 400;
          font-size: 14px;
          color: #f1f1f1;
          background-size: 100% 100%;
          background-image: url('../../../assets/imgs/breedAquatics/bg_list_yclb_nor@2x.png');

          &:hover {
            background-image: url('../../../assets/imgs/breedAquatics/bg_list_yclb_sel@2x.png');
            color: #83fff1;
            cursor: pointer;
          }
          .yellowF {
            color: #d1b02e;
          }
          .redF {
            color: #d64f37;
          }
          .greenF {
            color: #3ab25f;
          }
        }

        .list {
          display: flex;
          justify-content: space-between;
          font-weight: 400;
          font-size: 11px;
          color: #f1f1f1;

          div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &:nth-child(1) {
              flex: 3;
            }

            &:nth-child(2) {
              flex: 4;
            }

            &:nth-child(3) {
              flex: 1;
            }
          }

          .list-right {
            display: flex;
            align-items: center;
            justify-content: space-between;

            img {
              width: 20px;
              height: 20px;
            }
          }
        }
      }
    }
  }
}
:deep(.my-input-number) {
  input {
    background: #172561;
    color: #fff;
  }
}
.default-btn {
  cursor: pointer;
  padding: 4px 12px;
  background: linear-gradient(180deg, #3674a3 0%, #1d3e79 100%);
  border-radius: 6px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  margin-top: 16px;
}

.modal-show-btn-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  color: #fff;
  font-size: 14px;
  .modal-show-btn {
    border: 2px solid #2f5fb2;
    background: linear-gradient(180deg, #3674a3 0%, #1d3e79 100%);
    border-image: linear-gradient(180deg, rgba(56, 116, 202, 1), rgba(59, 110, 183, 1)) 1 1;
    cursor: pointer;
    padding: 4px 30px;
  }
}

:deep(.ant-modal .ant-modal-content) {
  background-color: transparent !important;
}
:deep(.ant-modal .ant-modal-close) {
  color: #fff;
}
</style>
